<template>
    <div class="ProductLists">
        <h1 class="header">
            <router-link to="/categories" class="icon top" active-class=" iconAct"> </router-link>
            <input v-model="itemSearch" @change="changeSearch" class="head-input" type="text" placeholder="好吃的零食都在这~">
            <span @click="changeSearch">搜索</span>
        </h1>
    
        <div class="slected">
            <h3 :class="{'active':type=='new'}" @click="showNew"> 新品</h3>
            <h3 :class="{'active':type=='hot'}" @click="showHot"> 热卖</h3>
            <h3 :class="{'active':type=='price','activePrice':type=='price'}" class="price" @click="changePrice"> 价格</h3>
        </div>
    
        <div class="details" ref="list">
            <!-- <router-link to="productDetail"> -->
            <figure v-for="(val,index) in curItems" :key="index" class="Pub-figure">
    
                <router-link :to="{path:'/productDetail', query:{data:val}}">
                    <!--带参数跳转到商品详情 -->
                    <img class="footPic" :src="val.pic">
                    <figcaption class="Pub-figcaption ">
                        <h2 class="Pub-figcp-h2">{{val.name}}</h2>
                        <span class="redPrice">{{val.salesPrice.value}}</span>
                        <b class="grayPrice">{{val.marketPrice.value}}</b>
                    </figcaption>
                </router-link>
                <img class="addCar" src="../../static/img/icon-add-to-cart-green.png" @click.stop.prevent="addCart(val)">
    
            </figure>
            <!-- </router-link>  -->
        </div>
        <!--********购物车 ：松鼠图标 ***************  -->
        <router-link to="/ShoppingCart">
            <div class="picCart">
                <b :class="{'CartCountNum':count!=''}">{{count}}</b>
            </div>
        </router-link>
        <div class="toTop" @click="toTop ">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: [], // 原始完整数据
            itemSearch: '',
            itemPrice: '',
            type: "new",
            curItems: [], // 当前显示数据
            isAsc: true,
            showLen: 12,
            startIndex: 0,
            searchItems: [],
            count: '',
        }
    },
    methods: {
        showNew() {
            this.curItems = this.getNewItems.slice(0, this.showLen);
            this.type = "new";
            this.$refs.list.scrollTop = 0;
            this.startIndex = 12;
            console.log(333, "New", this.curItems);
            this.itemSearch = "";

        },
        showHot() {
            this.curItems = this.getHotItems.slice(0, this.showLen);
            this.type = "hot";
            this.$refs.list.scrollTop = 0;
            this.startIndex = 12;
            console.log(444, "Hot", this.curItems);
            this.itemSearch = "";
        },
        changePrice() {
            this.isAsc = !this.isAsc;
            if (this.isAsc) {
                this.curItems = this.getAscItems.slice(0, this.showLen);
            } else {
                this.curItems = this.getDesItems.slice(0, this.showLen);
            }
            this.type = "price";
            this.$refs.list.scrollTop = 0;
            this.startIndex = 12;
            this.itemSearch = "";
        },
        changeSearch() { // 搜索栏
            if (this.itemSearch != "") {
                this.curItems = [];
                for (let i = 0; i < this.items.length; i++) {
                    if (this.items[i].name.toUpperCase().indexOf(this.itemSearch.toUpperCase()) != -1) {
                        this.curItems.push(this.items[i]);
                    }
                }
            } else {
                this.curItems = this.items;
                if (this.type == "new") {
                    this.curItems = this.getNewItems;
                } else if (this.type == "hot") {
                    this.curItems = this.getHotItems;
                } else if (this.type == "price") {
                    if (this.isAsc) {
                        this.curItems = this.getAscItems;
                    } else {
                        this.curItems = this.getDesItems;
                    }
                }
            }
            this.$refs.list.scrollTop = 0;
            this.startIndex = 12;
        },
        handscroll() {
            console.log("scroll")
            var clientHeight = this.$refs.list.clientHeight;
            var scrollTop = this.$refs.list.scrollTop;
            var scrollHeight = this.$refs.list.scrollHeight;
            console.log("位置", clientHeight + "," + scrollTop + "," + scrollHeight);
            if (clientHeight + scrollTop >= scrollHeight - 20) { //不加此判断，不会显示每次加载的数据
                console.log("进来了----------" + this.startIndex + "," + this.showLen)
                var cItems = [];
                if (this.type == "new") {
                    cItems = this.getNewItems;
                } else if (this.type == "hot") {
                    cItems = this.getHotItems;
                } else if (this.type == "price") {
                    if (this.isAsc) {
                        cItems = this.getAscItems;
                    } else {
                        cItems = this.getDesItems;
                    }
                }


                var endIndex = 0;
                if (this.startIndex + this.showLen > cItems.length) { //最后一次加载个数不够12个时进此判断
                    endIndex = cItems.length - 1;
                    console.log("ind+len > len", this.startIndex, endIndex, cItems.length)

                } else { //除最后一次加载，每次加载够12条数据
                    endIndex = this.startIndex + this.showLen;
                    console.log("else否则", this.startIndex, endIndex, cItems.length)

                }
                console.log(66666, this.startIndex, endIndex, cItems.length);
                for (var i = this.startIndex; i < endIndex; i++) {
                    this.curItems.push(cItems[i]);
                }
                this.startIndex += this.showLen;
                console.log(777777, this.startIndex, endIndex, cItems.length);

            }
        },
        addCart(item) {
            console.log("加入购物车", item);
            this.$store.commit("addProduct", item);
            this.count++;

            // $(function () {
            //                 console.log(321,"购物车动画", event.pageX, offset.left,offset.top )

            //     var offset = $(".picCart").offset();
            //     $(".addCart").click(function (event) {
            //         var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
            //         var flyer = $('<img class="flyer-img" src="' + img + '">'); //抛物体对象 
            //         flyer.fly({
            //             start: {
            //                 left: event.pageX,//抛物体起点横坐标 
            //                 top: event.pageY //抛物体起点纵坐标 
            //             },
            //             end: {
            //                 left: offset.left + 10,//抛物体终点横坐标 
            //                 top: offset.top + 10, //抛物体终点纵坐标 
            //             },
            //             onEnd: function () {
            //                 $("#tip").show().animate({ width: '200px' }, 300).fadeOut(500);////成功加入购物车动画效果 
            //                 this.destory(); //销毁抛物体 
            //                 console.log(123,"购物车动画", event.pageX, offset.left,offset.top )
            //             }
            //         });
            //     });
            // });






        },
        toTop() {
            this.$refs.list.scrollTop = 0;
        }
    },
    mounted() {
        console.log("mounted", this.$refs)
        this.$refs.list.addEventListener("scroll", this.handscroll);

        console.log(111, this.$route.query.picName)
        fetch("../../static/data/categories/" + this.$route.query.picName + ".json")
            .then(res => res.json())
            .then(res => {
                this.items = res.data.items;
                this.curItems = this.getNewItems.slice(0, this.showLen);
                this.startIndex += this.showLen;//为什么要写在这里？
                // this.curItems = this.getNewItems;
                console.log(222, res.data.items);
                // console.log(98765432, this.getNewItems);

                if (this.$store.state.productSum == 0) {
                    this.count = '';
                } else {
                    this.count = this.$store.state.productSum;
                }

            })
    },
    computed: {
        getDesItems() {
            return this.items.sort(function (x, y) {
                return parseFloat(y.salesPrice.value) - parseFloat(x.salesPrice.value);
            })
        },
        getAscItems() {
            return this.items.sort(function (x, y) {
                return parseFloat(x.salesPrice.value) - parseFloat(y.salesPrice.value);
            })
        },
        getHotItems() {
            return this.items.sort(function (x, y) {
                return parseFloat(x.salesCount) - parseFloat(y.salesCount);
            })
        },
        getNewItems() {
            return this.items.sort(function (x, y) {
                return parseFloat(y.reviewCount) - parseFloat(x.reviewCount);
            })
        },
    }
}
</script>
<style  scoped>
.active {
    color: green;
    border-bottom: 2px solid yellowgreen;
}

.redPrice {
    color: red;
    font-size: .23rem;
}

.grayPrice {
    color: gray;
    font-weight: normal;
    margin-left: .04rem;
}

.iconAct {
    border-bottom: 1px solid red;
    border-left: 1px solid red;
}

.price {
    width: 13vw;
    background: url("../../static/img/product-list-arrow.png") no-repeat right center;
    background-size: .12rem;
}

.activePrice {
    background: url("../../static/img/product-list-green.png") no-repeat right .18rem;
    background-size: .12rem;
}






/* 公共部分结束 */

.ProductLists {
    background: #f9f9f9;
    height: 100vh;
    width: 100vw;
    z-index: 99;
    position: absolute;
}

.head-input {
    height: 4vh;
    width: 75vw;
    outline: none;
    border: none;
    border-radius: 3px;
    margin-left: .2rem;
    padding-left: .4rem;
    background: url("../../static/img/icon-search.png") no-repeat .1rem center;
    background-size: .2rem;
    background-color: #f9f9f9;
}

.top {
    top: .3rem;
}

.ProductLists h1 span {
    font-size: .23rem;
}



/* selected样式 */

.slected {
    background: white;
    display: flex;
    justify-content: space-around;
    margin-top: .72rem;
    height: .5rem;
    line-height: .5rem;
    font-size: .18rem;
    position: fixed;
    left: 0;
    right: 0;
    top: .03rem;
}

.slected h3 {
    font-weight: normal;
    font-size: .24rem;
}

.details {
    position: fixed;
    top: 1.34rem;
    overflow: scroll;
    height: 86.5vh;
}

.details figure:nth-of-type(odd) {
    margin-right: .1rem;
}

.details figure {
    position: relative;
}

.footPic {
    width: 46.8vw;
}

.addCar {
    width: .36rem;
    position: absolute;
    bottom: .05rem;
    right: .05rem;
}



/*  加入购物车时的松鼠图标  */

.picCart {
    position: fixed;
    left: 0.1rem;
    bottom: .5rem;
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
    background: url("../../static/img/icon-cart-white@2x.45c6b808.png") no-repeat .1rem center;
    background-size: .5rem;
    background-color: white;
    box-shadow: 0 0 10px #eee;
}

.CartCountNum {
    position: absolute;
    right: 0.1rem;
    background: orange;
    color: white;
    border-radius: 30px;
    text-align: center;
    padding: .01rem 0.07rem 0.02rem 0.07rem;
}



/* 回到顶部的图标  toTop ----base 公共样式里面  */
</style>
